<template>
<div>
    <div class="padding border-bottom" >
        <el-button type="primary" @click="add">增加患者</el-button>
    </div>
    <div>
        <el-dialog  type="text" title="增加患者"  :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"  >   
                    <div class="card-body">
                                <div class="input-group mb-3">   
                                     <el-form-item label-width="0px" prop="account" style="width: 70%">
                                        <el-input v-model="ruleForm.account"  
                                            placeholder="账号 6--12位"  ></el-input>
                                    </el-form-item> 
                                    <div class="input-group-append" style="width:30%;height:100%">                                       
                                            <div class="input-group-text">
                                            <span class="fas fa-user">account</span>
                                            </div>
                                        </div>                                
                                </div>

                                <div class="input-group mb-3">
                                     <el-form-item label-width="0px" prop="name" style="width: 70%">
                                     <el-input v-model="ruleForm.name"   placeholder="姓名 2--10位"></el-input> 
                                     </el-form-item> 
                                     <div class="input-group-append" style="width:30%;height:100%">     
                                        <div class="input-group-text">
                                        <span class="fas fa-user">name</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <el-form-item label-width="0px" prop="idCard" style="width: 70%">
                                        <el-input v-model="ruleForm.idCard"  maxlength="18" 
                                           show-word-limit placeholder="身份证18位"></el-input> 
                                    </el-form-item> 
                                    <div class="input-group-append" style="width:30%;height:100%">  
                                        <div class="input-group-text">
                                        <span class="fas fa-envelope">身份证号</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="input-group mb-3">
                                    <el-form-item label-width="0px" prop="password" style="width: 70%">
                                         <el-input type="password" v-model="ruleForm.password" autocomplete="off"  
                                        placeholder="请输入密码6--12位"></el-input>
                                    </el-form-item> 
                                    <div class="input-group-append" style="width: 30%;height:100%" >
                                        <div class="input-group-text">
                                        <span class="fas fa-lock">密码</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-3" >
                                    <el-form-item label-width="0px" prop="checkPass" style="width: 70%">
                                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" 
                                       placeholder="请再次输入密码"></el-input>
                                    </el-form-item> 
                                    <div class="input-group-append" style="width: 30%;height:100%">
                                        <div class="input-group-text">
                                        <span class="fas fa-lock">确认密码</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <select id="inputStatus" class="form-control custom-select" style="width: 70%" v-model="ruleForm.sex" >
                                    <option   value="男">男</option>
                                    <option value="女">女</option>
                                    </select>
                                        <div class="input-group-append" style="width: 30%;height:100%">
                                            <div class="input-group-text">
                                            <span class="fas fa-user">性别</span>
                                            </div>
                                        </div>
                                </div>
                                
                               
                                <div class="input-group mb-3" > 
                                    <el-form-item label-width="0px" prop="telephone" style="width: 70%">
                                        <el-input  v-model.number="ruleForm.telephone" maxlength="11" 
                                           show-word-limit autocomplete="off"></el-input> 
                                    </el-form-item> 
                                    <div class="input-group-append" style="width:30%;height:100%"> 
                                        <div class="input-group-text">
                                        <span class="fas fa-user">电话号码</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-3" > 
                                         <el-input-number v-model="ruleForm.age" controls-position="right"  :min="1" :max="100"></el-input-number>
                                    <div class="input-group-append" style="width:30%;height:100%"> 
                                        <div class="input-group-text">
                                        <span class="fas fa-user">年龄</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-3" > 
                                           <el-input-number v-model="ruleForm.money" :precision="2" :step="0.1" :max="999999"></el-input-number>
                                    <div class="input-group-append" style="width:30%;height:100%"> 
                                        <div class="input-group-text">
                                        <span class="fas fa-user">花费金额</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-3" > 
                                    <el-form-item label-width="0px" prop="emergencyContact" style="width: 70%">
                                        <el-input  v-model="ruleForm.emergencyContact"  
                                           show-word-limit autocomplete="off"></el-input> 
                                    </el-form-item> 
                                    <div class="input-group-append" style="width:30%;height:100%"> 
                                        <div class="input-group-text">
                                        <span class="fas fa-user">亲属姓名</span>
                                        </div>
                                    </div>
                                </div>
                                 <div class="input-group mb-3" > 
                                    <el-form-item label-width="0px" prop="emergencyTel" style="width: 70%">
                                        <el-input  v-model.number="ruleForm.emergencyTel" maxlength="11" 
                                           show-word-limit autocomplete="off"></el-input> 
                                    </el-form-item> 
                                    <div class="input-group-append" style="width:30%;height:100%"> 
                                        <div class="input-group-text">
                                        <span class="fas fa-user">亲属联系方式</span>
                                        </div>
                                    </div>
                                </div>
                               
                            <div class="input-group mb-3">
                                <select  class="form-control custom-select" v-model="ruleForm.status">
                                <option   value="1">可用</option>                               
                                <option value="2">注销</option>
                                </select>
                                <div class="input-group-append">
                                        <div class="input-group-text">
                                        <span class="fas fa-user">账号状态</span>
                                        </div>
                                </div>
                            </div>
                        </div>
                            <div class="row">
                                <div class="col-12">
                                    <el-button @click="cancel" class="btn btn-secondary">取消</el-button>
                                    <el-button @click="resetForm" class="btn btn-secondary" >重置</el-button>
                                    <el-button type="primary" @click="submitForm('ruleForm')" class="btn btn-success float-right">创建</el-button>

                                </div>
                            </div>

                </el-form> 
        </el-dialog>
    </div>

    <!-- 患者详情表格 -->
    <div>
        <el-dialog  type="text" title='患者详情'  :visible.sync="vieWdialogFormVisible">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>患者详情</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">关闭</el-button>
            </div>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    姓名
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.name}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    账号
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.account}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    手机号码
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.telephone}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    身份证号
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.idCard}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    花费金额
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.money}}
                    </el-card>
                </el-col>
            </el-row>
            
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    性别
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.sex}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    年龄
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.age}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    亲属姓名
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.emergencyContact}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    亲属联系方式
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.emergencyTel}}
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="always">
                    状态
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                    {{patientView.status=='y'?"可用":"注销"}}
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        </el-dialog>
    </div>
<el-divider><i class="el-icon-s-promotion"></i></el-divider>
    <div style="text-align:center">

        <div class="doctor_seacher">
            姓名:<el-input v-model="search_name" placeholder="请输入姓名" class="doctor_seacher_info"></el-input>
            账号:<el-input v-model="search_account" placeholder="请输入账号" class="doctor_seacher_info"></el-input>
            身份证:<el-input v-model="search_idcard" class="doctor_seacher_info" style="width:180px" maxlength="18" 
             show-word-limit placeholder="只能输入数字和英文" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" ></el-input> 
            手机:<el-input v-model="search_phone" class="doctor_seacher_info" style="width:160px" maxlength="11" show-word-limit 
            placeholder="只能输入数字" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
            性别:<select    v-model="search_sex" >
                                    <option   value="0">请选择</option>
                                    <option   value="男">男</option>
                                    <option   value="女">女</option></select>
            <el-button type="primary" @click="searche" icon="el-icon-search" style="margin-left:20px">搜索</el-button>
        </div>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="250">
                    <el-table-column
                        type="index">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="age"
                    label="年龄"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="telephone"
                    label="电话号码"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="selectRow(scope.row)"
                            type="text"
                            size="small">
                            <a class="btn btn-primary btn-sm">
                              <i class="fas fa-folder">
                                </i>
                                查看详情
                            </a>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <div class="block">
   
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="4"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals">
                </el-pagination>
            </div>
       

    
    </div>   
</div>
</template>
<script>
    const axios = require("axios");
    export default {
    data(){
            
        //校验密码
         var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else if(value.length>12 || value.length<6){
            callback(new Error('密码长度在6--12位'));
        
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        tableData:[],
        ruleForm: {
            account: '',
            name:'',
            password: '',
            checkPass:'',
            telephone:'',//手机
            sex:'男',//默认男
            idCard:'',//身份证
            age:'',
            money:'',
            emergencyContact:'',
            emergencyTel:'',
            status:'1'//默认可用
            
        },
        //校验弹出框表单
        rules: {
            account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
            name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
          password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
          checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                    ],
            
            telephone:[
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    {  pattern:/^\d{11,11}$/, message: '长度在 11 个数字', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'},
                     
                    ],//手机
            
            idCard:[{ required: true, message: '请输入身份证号', trigger: 'blur' },
                    { min: 18, max: 18, message: '长度在 18  个字符', trigger: 'blur' }
                    ],//身份证
            emergencyContact:[{ required: true, message: '请输入亲属姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],//亲属姓名
            emergencyTel:[{ required: true, message: '请输入亲属姓名', trigger: 'blur' },
                    {  pattern:/^\d{11,11}$/, message: '长度在 11 个数字', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'},
                    ],//亲属电话
        },
          
            dialogFormVisible:false,//控制弹框的显示
            vieWdialogFormVisible: false,//控制显示医生详细信息表格
            patientView: '',//患者详细信息
            search_name:'',
            search_account:'',
            search_idcard: '',
            search_phone: '',
            search_sex: '0',
            currentPage: 1,
            pagesize:4,
            totals:0,
      }  
    },
    methods:{
            handleSizeChange(val) {
                this.pagesize=val;
                this.patientlist();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.patientlist();
        
            },
        selectRow(row) {
                this.viewPatient(row.id);
            },
        searche(){
            this.patientlist();
        },
      viewPatient(id){
          axios.get("http://192.168.6.189:8080/hpl-patient/getById?id="+id).then((r) => {
                if(r.data.code == 200){
                    this.patientView=r.data.data;
                    this.vieWdialogFormVisible=true;//显示弹框
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                            top.location.href="/login"
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
      },
    
      //打开增加管理员弹框
      add(){
            this.resetForm();
            this.patientView='';
            this.dialogFormVisible = true; 
          },
        
        //增加提交到后台
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                  if (valid) { 
                      axios.post("http://192.168.6.189:8080/hpl-patient/add",this.ruleForm).then((r) => {
                            if(r.data.code === 200){
                                this.$message({
                                message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                    });	
                                    this.patientlist();
                                    this.cancel();
                                    this.doclist();
                            }else if(r.data.code === 403){
                                this.$notify({
                                    title: '警告',
                                    message: r.data.msg,
                                    type: 'warning'
                                    }); 
                             
                            }else if(r.data.code === 600){
                                 
                                for(let msg of r.data.data){
                                    this.$notify({
                                    title: '警告',
                                    message: msg,
                                    type: 'warning'
                                    }); 
                                }
                                 
                            }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                            top.location.href="/login"
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
                        })       
                } else {
                    this.$notify({
                                    title: '警告',
                                    message:'数据不规范，请检查',
                                    type: 'warning'
                                    });  
                    return false;
                }
            });
        },
        
        resetForm() {
           
            this.ruleForm.photo='';          
            this.ruleForm.title_id='0';
            this.ruleForm.dep_id='0';
            this.ruleForm.sex='男';
            this.ruleForm.status='1';
            this.ruleForm.account= '';
            this.ruleForm.name= '';
            this.ruleForm.password= '';
            this.ruleForm.checkPass= '';
            this.ruleForm.photo= '';
            this.ruleForm.entry_time= '';
            this.ruleForm.birthDate= '';
            this.ruleForm.telephone= '';
            this.ruleForm.description= '';
            this.ruleForm.id_card= ''; 
        },
         cancel(){
             //重置表单
            this.resetForm();
            this.dialogFormVisible = false;
            this.patientView='';
            this.vieWdialogFormVisible=false;
         },
         patientlist(){
             //查询患者
               
                var formData = new FormData;
                formData.append("currentPage",this.currentPage);
                formData.append("pagesize",this.pagesize);
                formData.append("name",this.search_name);
                formData.append("account",this.search_account);
                formData.append("idCard",this.search_idcard);
                formData.append("telephone",this.search_phone);
                formData.append("sex",this.search_sex);
                
                axios.post("http://192.168.6.189:8080/hpl-patient/getPage",formData).then((r) => {
                    if(r.data.code == 200){
                        this.tableData = r.data.data.records;
                        this.totals= parseInt(r.data.data.total);

                    }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            });
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
                })
            },
    }, 
    mounted(){
        this.patientlist(); 
         }
}
</script>
<style scoped>
 .doctor_seacher{
     width: max-content;
     float: left;
     margin-bottom: 10px;
 }
 .doctor_seacher_info{
     width: 120px;
     margin-right: 10px;
 }
</style>
